<template>
	<view class="content">
		<!-- F1: 状态栏 -->
		<view 
			class="status-bar"
			:style="{height: statusBarHeight+'px'}"
		/>
		<!-- F2: LOGO -->
		<!-- 图像的默认大小为320*240 
			mode="widthFix"  宽度固定，高度等比例缩放
		-->
		<image 
			src="/static/img/logo.png"
			class="logo"
			mode="widthFix"
		/>
		<!-- F3: 手机号码输入框 -->
		<view class="input-group">
			<input type="text" placeholder="请输入手机号码" class="input" v-model="phone" />
			<uni-icons type="phone-filled" color="#090" size="25" class="icon left" />
			<uni-icons type="clear" color="#1296DB" size="25" class="icon right" @click="phone=''" />
		</view>
		<!-- F4: 密码框 -->
		<view class="input-group pwd-group">
			<input type="password" placeholder="请输入密码" class="input" />
			<uni-icons type="locked-filled" color="#090" size="25" class="icon left" />
			<uni-icons type="eye-slash" size="25" class="icon right" />
		</view>
		<!-- F5: 提交按钮 -->
		<button class="btn">登 录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 准备变量用于保存获取的状态栏高度，并提供初始值
				statusBarHeight: 0,
				phone: '13501234567'
			}
		},
		// 生命周期函数
		// 当页面组件挂载后，自动执行
		onLoad() {
			// 获取状态栏的高度，并将高度保存到数据中
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}
	// F1: 状态栏
	.status-bar {
		background-color: $zh-theme-color;
		height: 30px;
	}
	// F2: LOGO
	.logo {
		width: 450rpx;
		margin: $uni-spacing-col-lg*6 auto 0;
	}
	// F3: 输入框
	.input-group {
		background-color: $uni-bg-color-grey;
		margin: $uni-spacing-col-lg*3 $uni-spacing-row-lg 0;
		position: relative;
		border-radius: $uni-border-radius-lg;
		&.pwd-group {
			margin-top: $uni-spacing-col-lg*1.5;
		}
		.input {
			width: 100%;
			font-size: $uni-font-size-base;
			height: $uni-font-size-lg*3;
			padding: 0 $uni-spacing-row-base*3;
		}
		.icon {
			position: absolute;
			top: $uni-spacing-col-lg;
			&.left {
				left: $uni-spacing-row-sm;
			}
			&.right {
				right: $uni-spacing-row-sm;
			}
		}
	}
	// F5: 登录按钮
	.btn {
		// width: 100%;
		background-color: $zh-theme-color;
		color: $zh-theme-color-inverse;
		margin: $uni-spacing-col-lg*1.5 $uni-spacing-row-lg 0;
		&:active {
			background-color: darken($zh-theme-color,5%);
		}
	}
</style>
